<template>
    <div class="page-container">
        <!--工具栏-->
        <TableHead
            :config="tableHeaderConfig"
            :searchdata.sync="filters"
            @parentPageList="findPage()"
            :tabinline="true"
            v-show="showSearch"
        >
            <template slot="appId">
                <el-select v-model="filters.appId" placeholder="精确查询" size="mini" clearable>
                    <el-option
                        v-for="item in appManagerList"
                        :key="item.appId"
                        :label="item.appName"
                        :value="item.id"
                    />
                </el-select>
            </template>
        </TableHead>
        <el-card class="card-box" :body-style="{ padding: '12px' }">
            <TableToolBar :showSearch.sync="showSearch" @queryTable="findPage" :columns="columns">
                <el-button type="primary" size="mini" @click="handleItem" icon="el-icon-plus">新增</el-button>
            </TableToolBar>
            <Table
                v-model="pageNum"
                :showNo="true"
                :columns="columns"
                :data="dataList"
                :total="total"
                :loading="loading"
                @getPageList="findPage"
                :isPagination="true"
            >
                <template slot="oper" slot-scope="{ scope }">
                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleEdit('edit', scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                </template>
            </Table>
        </el-card>
        <EditItem
            v-model="dialogVisible"
            :data-form="dataForm"
            :dialog-config="dialogConfig"
            :data-form-rules="dataFormRules"
            :dialog-tag="dialogTag"
            width="700px"
            @submitForm="submitForm"
        >
            <template slot="appId">
                <el-select
                    v-model="dataForm.appId"
                    placeholder="请选择应用"
                    @change="handleAppId"
                    :disabled="dialogTag === 'edit'"
                >
                    <el-option
                        v-for="item in appManagerList"
                        :key="item.id"
                        :label="item.appName"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </template>
        </EditItem>
    </div>
</template>
<script>
import EditItem from '@/components/EditItem'
import { confirm, deepClone } from '@/utils/utils'
import { appManagerPageList } from '@/api/system/application'
import { addRes, editRes, delRes, getMenuApiList } from '@/api/system/menu'
import TableToolBar from '@/components/TableToolBar'

export default {
    name: 'menuapi',
    components: {
        EditItem,
        TableToolBar
    },
    data() {
        return {
            showSearch: true,
            pageRequest: { pageNum: 1, pageSize: 10 },
            isPagination: false,
            loading: false,
            dataList: [],
            total: 0,
            tableHeaderConfig: [
                { title: '接口名称', code: 'resName', type: 'input' },
                { title: '应用名称', slot: 'appId' }
            ],
            filters: {
                resName: '',
                appId: ''
            },
            pageNum: 1,
            size: 'small',
            columns: [
                { label: '接口名称', prop: 'resourceName', minWidth: '130', visible: true, key: 'resourceName' },
                { label: '授权标识', prop: 'perms', minWidth: '100', visible: true, key: 'perms' },
                { label: '应用名称', prop: 'appName', minWidth: '90', visible: true, key: 'appName' },
                { label: '接口Url', prop: 'url', minWidth: '150', visible: true, key: 'url' },
                { label: '描述', prop: 'description', minWidth: '150', visible: true, key: 'description' },
                { label: '创建人/创建时间', type: 'createUser', minWidth: 120, visible: true, key: 'createUser' },
                { label: '更新人/更新时间', type: 'updateUser', minWidth: 100, visible: true, key: 'updateUser' },
                { label: '操作', slot: 'oper', minWidth: '160', align: 'center', visible: true, key: 'oper' }
            ],

            filterColumns: [],
            dialogVisible: false, // 新增编辑界面是否显示
            deptData: [],
            roles: [],
            // 新增编辑界面数据
            dataFormDefault: {
                resourceName: '',
                appId: '',
                resourceCode: '',
                perms: '',
                url: '',
                description: '',
                type: 4,
                resourceHierarchy: '1'
            },
            dataForm: {},
            // dialog 要渲染的数据json
            dialogConfig: [
                { title: 'api接口名称', code: 'resourceName', type: 'input' },
                { title: '应用', slot: 'appId', code: 'appId' },
                { title: '资源code', code: 'resourceCode', type: 'input' },
                { title: '授权标识', code: 'perms', type: 'input', maxlength: '255' },
                { title: 'api接口', code: 'url', type: 'input', maxlength: '3000' },
                {
                    title: '描述',
                    code: 'description',
                    type: 'textarea',
                    maxlength: '255'
                }
            ],
            dataFormRules: {
                resourceName: [
                    {
                        required: true,
                        message: 'api接口名称',
                        trigger: 'blur'
                    },
                    {
                        min: 0,
                        max: 20,
                        message: '最多可输入20 个字符',
                        trigger: 'blur'
                    }
                ],
                appId: [{ required: true, message: '请选择应用名称', trigger: 'blur' }],
                resourceName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }],
                url: [{ required: true, message: '请输入api接口', trigger: 'blur' }],
                resourceCode: [{ required: true, message: '资源编码必填', trigger: 'blur' }]
            },
            dialogTag: 'add', // 编辑与新样的标识,
            appManagerList: []
        }
    },
    mounted() {
        this.findPage()
        this.appManagerPage()
    },
    methods: {
        // 获取分页数据
        findPage() {
            this.loading = true
            // 入参
            const params = Object.assign({}, this.filters, this.pageRequest)
            console.log('findpage params', this.params)
            getMenuApiList(params)
                .then((res) => {
                    const { data } = res

                    this.dataList = data.items || []
                    this.total = data.total
                })
                .finally(() => {
                    this.loading = false
                })
        },
        // 应用列表
        appManagerPage() {
            appManagerPageList({ isValid: 1 }).then((res) => {
                this.appManagerList = res.data || []
            })
        },
        handleAppId() {},
        // 删除
        handleDelete(row) {
            const { id } = row
            // tip 待确认文字
            let tip = '确认删除选中记录吗？'
            confirm(tip).then(() => {
                const params = {
                    resourceId: id
                }
                delRes(params).then(() => {
                    this.$message({ message: '删除成功', type: 'success' })
                    this.findPage()
                })
            })
        },
        // 禁用
        handleEnable(row) {
            const { isValid } = row
            const tip = isValid === 0 ? '是否要禁用' : '是否要启用'
            const params = Object.assign({}, row, {
                isValid
            })
            confirm(tip)
                .then(() => {
                    editRes(params).then((res) => {
                        console.log(res)
                        this.findPage()
                    })
                })
                .catch(() => {
                    row.isValid = isValid === 0 ? 1 : 0
                })
        },
        // 显示新增界面
        handleItem() {
            this.dialogVisible = true
            this.dialogTag = 'add'
            this.dataForm = Object.assign({}, this.dataFormDefault)
        },
        // 显示编辑界面
        handleEdit(tag, params) {
            this.dialogVisible = true
            this.dataForm = Object.assign({}, params, {
                appId: Number(params.appId)
            })
            this.dialogTag = tag
        },
        // 编辑
        submitForm(params) {
            const { dialogTag } = this
            const fetchApi = dialogTag === 'add' ? addRes : editRes
            fetchApi(params)
                .then((res) => {
                    this.$message({
                        type: 'success',
                        message: '提交成功'
                    })
                    this.dialogVisible = false
                    this.findPage()
                })
                .then(() => {
                    //  this.findPage();
                })
        }
    }
}
</script>

<style scoped></style>
